<template>

  <div class="main container ">

    <div class="heard">
      <div class="biglantern">
        <img class="img-fluid" src="../assets/imgs/大灯笼.png" alt="">
      </div>
      <div class="leftSmallLantern">
        <img class="img-fluid" src="../assets/imgs/leftde.png" alt="">
      </div>
      <div class="rightSmallLantern">
        <img class="img-fluid" src="../assets/imgs/rightde.png" alt="">
      </div>
    </div>
    <div class="text">
      {{ textValue }}
    </div>
    <div ref="qw" class="content container" id="qw" v-if="thisItem" @click="dl">
      <div class="title" >
        <img :src="getAssetsFile(thisItem.smal)" alt="">
      </div>
      <div class="qw">
        <div class="h1">
          {{ thisItem.title }}
        </div>
        <div class="p" v-html="thisItem.contents">

        </div>
        <div class="tip" >
          点击了解更多
        </div>
      </div>
    </div>
    <div class="buttonGroup">
      <div class="item" v-for="(i,v) in buttonGroupData" @click="btn(i.path)">{{ i.title }}</div>
    </div>
    <van-overlay :show="show">
      <div class="dlmain" v-if="thisItem">
        <div class="top">
          <div class="text">
            {{ textValue }}
          </div>
          <div class="contents">
            <van-swipe indicator-color="#dd2a1b" :initial-swipe="initial" @drag-end="drag">
              <van-swipe-item v-for="(v,i) in qianwenData" :key="v.title">
                <div class="box">
                  <div class="s container">
                    <div class="h1">
                      {{ v.title }}
                    </div>
                    <div class="p" v-html="v.contents">

                    </div>
                    <div class="tip" @click="dl">
<!--                      点击了解更多-->
                    </div>

                  </div>
                </div>
              </van-swipe-item>

            </van-swipe>
          </div>
        </div>
        <div class="bottom">

          <div class="tit">
            <div class="titleder" >
              <img :src="getAssetsFile(qwnr.smaler)" alt="">
            </div>
            <div class="data">
              {{ qwnr.nr }}
            </div>
          </div>
          <div class="close" @click="show = false">
            <img src="../assets/imgs/x.png" alt="">
          </div>

        </div>
      </div>
    </van-overlay>

    <van-overlay :show="showFx" @click="showFx = false">
      <div class="showFx_box">
        <img src="../assets/imgs/fx.png" alt="">
      </div>
    </van-overlay>
  </div>

</template>
<script setup>
import {useRouter} from 'vue-router';
import {useRoute} from 'vue-router';
import html2canvas from "html2canvas"
import {useCounterStore} from '@/stores/counter'
const counter = useCounterStore()
const router = useRouter();
const route = useRoute();
const qw = ref(null)
import {nextTick, onMounted, ref, toRaw} from "vue";

console.log(route.params)
const qianwenData = JSON.parse(localStorage.getItem('qianwenData'))
console.log(qianwenData)
const thisItem = ref(null)
const initial = ref(null)
// 解密的内容
const qwnr = ref(null)
onMounted(() => {
  nextTick(() => {
    console.log(route.query.indexs,"pppp");
    thisItem.value=qianwenData[route.query.indexs]
    qwnr.value=qianwenData[route.query.indexs]

  })
})
const getAssetsFile = (url) => {
  return new URL(`../assets/imgs/${url}`, import.meta.url).href;
};
const textValue = ref()
const show = ref(false);
const showFx = ref(false);
const buttonGroupData = [
  {index: 0, title: "分享", path: "fx"},
  {index: 1, title: "长按保存", path: "save"},
  {index: 2, title: "了解正度", path: "zd"},
  {index: 3, title: "了解博物馆头条", path: "tt"}
];

function saveToImg() {
  //点击保存按钮的回调事件
  const element = qw.value; // 需要导出的页面
  html2canvas(element, {
    allowTaint: true,
    useCORS: true,
  }).then((canvas) => {
    // imgUrl 是图片的 base64格式 代码 png 格式
    const imgUrl = canvas.toDataURL('image/png');
    //下载图片的功能。
    downloadIamge(imgUrl, "plantCardImg.png")
  });
}

function downloadIamge(imgsrc, name) {  //下载图片地址和图片名
  const image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function () {
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    const context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    const url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
    const a = document.createElement("a"); // 生成一个a元素
    const event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name || "photo"; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  };
  image.src = imgsrc;
}

const saveFun = () => {
  console.log(qw.value)
  saveToImg()
}

const btn = (i) => {
  console.log(i)
  switch (i) {
    case "fx":
      showFx.value = true;
      break;
    case "zd":
      window.open('https://www.vamplatform.cn/index.html');
      break;
    case "save":
      saveFun()
  }
}
textValue.value = localStorage.getItem("name")
const dl = () => {
  show.value = true
}
const drag = (num) => {
  const {index} = num
  qwnr.value = qianwenData[index]
}
</script>
<style scoped lang="scss">
.main {
  overflow: hidden;
  padding: 0;
  margin: 0;
  // position: relative;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(../assets/imgs/qianwembg.jpg);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  // justify-content: space-evenly;
  align-items: center;

  img {
    width: 100%;
    height: 100%;

  }

  .showFx_box {
    img {
      display: block;
      width: 50%;
      position: relative;
      top: 1%;
      right: -42%;
      //border: 1px solid red;
    }
  }

  .heard {
    // position: relative;
    // align-self: self-start;
    .biglantern {
      width: 100%;

      img {
        width: 100%;
        height: 100%;
      }

    }

    .leftSmallLantern, .rightSmallLantern {
      position: absolute;
      top: 0px;
      width: 80px;
      height: 150px;

    }

    .rightSmallLantern {
      right: 0;
    }
  }

  .text {
    width: 203px;
    height: 32px;
    border-radius: 20px;
    border: 1px solid white;
    background-color: #feca7a;
    color: #ce7e21;
    line-height: 32px;
    text-align: center;
    font-size: 18px;
  }

  .content {
    width: 70%;
    height: 310px;
    //border: 1px solid;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;

    .title {
      //border: 1px solid red;
      width: 100%;
      height: 40px;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      text-align: center;
      font-size: 14px;
      font-weight: bolder;
      color: white;
      font-family: 'MyCustomFont';

      :deep(span) {
        font-size: 20px !important;
        text-align: center;
      }
    }

    .qw {
      width: 70%;
      height: 90%;
      //background-color: pink;
      background-image: url(../assets/imgs/签文背景.png);
      background-size: 100% 100%;
      //border: 1px solid;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      flex-direction: column;
      box-sizing: border-box;
      padding: 20px;
      color: white;

      .h1 {

        width: 40px;
        height: 120px;
        writing-mode: vertical-rl; /* 竖向排列 */
        text-orientation: upright; /* 文字方向正立 */
        font-size: 26px;
        //background-color:pink;
        margin-right: 10px;
        font-weight: 400;
        font-family: 'MyCustomFont';
      }

      .p {
        width: 80%;
        height: 20%;
        font-family: 'MyCustomFont';
        //background-color:pink;
        font-size: 17px;
        font-weight: 300;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        :deep(p) {
          padding: 0;
          margin: 0;

        }
      }

      .tip {
        width: 50%;
        height: 10%;
        color: #f3b787;
        font-size: 9px;
        line-height: 9px;

      }
    }
  }

  .buttonGroup {
    width: 70%;
    height: 230px;
    //background-color: pink;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;

    .item {
      width: 75%;
      height: 45px;
      //background-color: skyblue;
      text-align: center;
      line-height: 40px;
      font-family: 'MyCustomFont', sans-serif;
      font-size: 15px;
      background-image: url(../assets/imgs/buttonbg.png);
      background-size: 100% 100%;
      color: white;

    }
  }

  .dlmain {
    width: 100vw;
    height: 100vh;
    //background-color: skyblue;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    .top {


      width: 70%;
      height: 420px;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      background-image: url(../assets/imgs/qwbj.png);
      background-size: 100% 100%;

      .contents {
        width: 90%;
        height: 330px;
        position: relative;

        :deep(.van-swipe__indicator) {
          background-color: #c93716;
        }

        :deep(.van-swipe) {
          width: 100%;
          height: 83%;
          top: 25%;
          //background-color: yellowgreen;
        }

        //border-radius: 46%;
        //background-color: white;
        margin-top: 5px;

        .custom-indicator {
          position: absolute;
          right: 5px;
          bottom: 5px;
          padding: 2px 5px;
          font-size: 12px;
          background: rgba(0, 0, 0, 0.1);
        }

        .box {
          position: relative;
          width: 100%;
          //background-color: green;
          //top: 25%;
        }

        .s {

          top: 25%;
          width: 59%;
          height: 70%;
          //border: 1px solid;
          //background-color: skyblue;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          color: white;

          .h1 {
            width: 40px;
            height: 120px;
            writing-mode: vertical-rl; /* 竖向排列 */
            text-orientation: upright; /* 文字方向正立 */
            font-size: 28px;
            //background-color:pink;
            margin-right: 10px;
            font-weight: 400;
            font-family: 'MyCustomFont';
            margin-top: 10px;
          }

          .p {
            width: 85%;
            height: 20%;
            font-family: 'MyCustomFont';
            //background-color:pink;
            font-size: 19px;
            font-weight: 300;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            :deep(p) {
              padding: 0;
              margin: 0;
            }
          }

          .tip {
            margin-top: 8px;
            width: 60%;
            height: 10%;
            color: #f3b787;
            font-size: 9px;
            line-height: 9px;
            text-align: center;

          }
        }
      }
    }

    .bottom {
      width: 77%;
      height: 220px;

      display: flex;
      flex-direction: column;
      align-items: center;

      .tit {
        width: 100%;
        height: 84%;
        padding-top: 9px;
        background-image: url(../assets/imgs/卷轴.png);
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        :deep(.titleder ) {
          width: 100%;
          height: 45px;
          //margin-top: 20px;
          img{
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }



        }

        .data {
          //border: 1px solid;
          margin: 0;
          width: 90%;
          font-size: 12px;
          //height: 50%;
          text-indent: 2em;
          //background-color: pink;
          font-family: 'MyCustomFont';
          box-sizing: border-box;
          padding: 0 5px ;

        }
      }

      .close {
        width: 30px;
        height: 30px;
      }
    }
  }
}

@font-face {
  font-family: 'MyCustomFont';
  src: url("../assets/jx.TTF");
}
</style>